<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯天气</title>
    <style>
        table {
            width: 800px;
            margin: 0 auto;
        }
        
        th {
            background-color: #BDBDBD;
        }
        
        th,
        td {
            line-height: 40px;
        }
        
        a {
            text-decoration: none;
        }
        
        table,
        th,
        td {
            border: 1px solid black;
            text-align: center;
            /* 合并相邻的边框 */
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <div class="container">
        <table class="table table-striped table-hover" cellspacing="0">

        </table>
    </div>
    <script src="../jsonp.js"></script>
    <script src="../template-web.js"></script>
    <script type='text/html' id='tpl'>
        <thead>
            <tr>
                <th>时间</th>
                <th>温度</th>
                <th>天气</th>
                <th>风向</th>
                <th>风力</th>
            </tr>
        </thead>
        <tbody>
            {{each info}}
            <tr>
                <td>{{dateFormat($value.update_time)}}</td>
                <td>{{$value.degree}}</td>
                <td>{{$value.weather}}</td>
                <td>{{$value.wind_direction}}</td>
                <td>{{$value.wind_power}}</td>
            </tr>
            {{/each}}
        </tbody>
    </script>
    <script>
        var table = document.querySelector('.table');

        function dateFormat(date) {
            var year = date.substr(0, 4);
            var month = date.substr(4, 2);
            var day = date.substr(6, 2);
            var hour = date.substr(8, 2);
            var minute = date.substr(10, 2);
            var seconds = date.substr(12, 2);
            return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒'
        }
        // 向模板中开放外部变量
        template.defaults.imports.dateFormat = dateFormat;
        jsonp({
            url: 'https://wis.qq.com/weather/common',
            data: {
                source: 'pc',
                weather_type: 'forecast_1h',
                // weather_type: 'forecast_1h|forecast_24h',
                province: '陕西省',
                city: '西安市'
            },
            success: function(data) {
                console.log(data);
                var html = template('tpl', {
                    info: data.data.forecast_1h
                });
                table.innerHTML = html;
            }
        })
    </script>
</body>

</html>